<template>
  <div class='container'>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">分销员姓名:</span>
      <el-input class='flex-1' v-model="name_value"></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">分销员电话:</span>
      <el-input class='flex-1' v-model="phone_value"></el-input>
    </div>
    <div class="m-50-t">
      <div class='app-row'>
        <span class="title bold align-right width-100" >分销员等级:</span>
        <el-radio v-model="expert_grade_radio" :label="1">分销员</el-radio>     
        <el-radio v-model="expert_grade_radio" :label="2">区域经销商</el-radio>     
        <el-radio v-model="expert_grade_radio" :label="11">店长</el-radio>     
      </div>
    </div>
    <div class="m-50-t">
      <div class='app-row'>
        <span class="title bold align-right width-100" >审核状态:</span>
        <el-radio v-model="check_radio" :label="1">未审核</el-radio>     
        <el-radio v-model="check_radio" :label="2">已审核</el-radio>     
      </div>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">分销员类型:</span>
      <el-select class='flex-1' v-model="experts_category_value" placeholder="请选择" @change="choose_experts_category">
        <el-option
          v-for="item in experts_category_list"
          :key="item.id"
          :value="item.id"
          :label="item.name">
        </el-option>
      </el-select>
    </div>

    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">分销员称号:</span>
      <el-input class='flex-1' v-model="jobTitle_value"></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">分销员描述:</span>
      <el-input class='flex-1' v-model="description_value"></el-input>
    </div>

    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="edit_button">确认修改</el-button>
    </div>
  </div>
</template>

<script>
  import experts_request from "@/api/experts_request"
  import experts_category_request from "@/api/experts_category_request"
  export default {
    name: 'experts_edit',
    data() {
      return {
        name_value: "",
        jobTitle_value: "",
        description_value: '',
        phone_value: '',
        recommend_value: '',
        experts_category_value: '',
        experts_list: [],
        expert_id: 0,
        expert_grade_radio: 1,
        experts_category_list: [],
        check_radio: 2,
      }
    },
    created() {
      this.get_detail(this.$route.query.id)
      this.get_experts_list()
      this.get_experts_category_list()
    },
    mounted() {
  
    },
    methods: {
      choose_experts_category(e) {
        this.experts_category_id = e
      },
      choose_expert(e) {
        this.expert_id = e
      },
      check_necessary_value() {
        if (this.name_value == '') {
          this.$message.error("请输入分销员姓名")
          return
        }
        if (this.phone_value == '') {
          this.$message.error("请输入分销员电话")
          return
        }
        return true
      },
      edit_button() {
        let if_necessary_value = this.check_necessary_value()
        if (!if_necessary_value) {
          return
        }
        let params = {
          id: this.$route.query.id,
          name: this.name_value,
          jobTitle: this.jobTitle_value,
          description: this.description_value,
          phone: this.phone_value,
          recommend_id: this.expert_id,
          category: this.experts_category_id,
          grade: this.expert_grade_radio,
          check: this.check_radio,

        }
        experts_request.edit_experts(params, res=> {
          this.$router.push('/experts/experts')
        })
      },
      get_detail(id) {
        experts_request.detail_experts({id}, res=> {
          let result = res.data
          this.name_value = result.name 
          this.jobTitle_value = result.jobTitle,
          this.description_value = result.description,
          this.phone_value = result.phone,
          this.expert_id = result.recommend_id
          this.get_experts_category_id = result.category
          this.check_radio = result.check
          this.expert_grade_radio = result.grade
          this.get_recommend_value(result.recommend_id)
          this.get_experts_category_value(result.category)
        })
      },
      get_experts_category_value(id) {
        let params = {
          id
        }
        if (id!=0) {
          experts_category_request.detail_experts_category(params, res=>{
            let result = res.data
            this.experts_category_value = result.name
          })
        }
      },
      get_recommend_value(id) {
        let params = {
          id
        }
        if (id!=0) {
          experts_request.detail_experts(params, res=>{
            let result = res.data
            this.recommend_value = result.name
          })
        }
      },
      get_experts_list() {
        this.listLoading = true
        let params ={
          pageSize: 10, 
          page: 1, 
          // name: this.keyword
        }
        experts_request.experts_list(params, res=> {
          this.listLoading = false,
          this.experts_list = res.data
        })
      },
      get_experts_category_list() {
        let params = {
          pageSize: 100, page:1,
        }
        experts_category_request.experts_category_list(params, res=> {
          this.experts_category_list = res.data
        })
      },
    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>